<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-input style="width:240px" placeholder="请输入景点名称" v-model="params.name"></el-input>

      <el-button style="margin-left: 5px " type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left: 5px " type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
    </div>
    <el-table :data="tableData" stripe>

      <el-table-column prop="name" label="景点名称"></el-table-column>
      <el-table-column prop="introduce" label="简介">
        <template slot-scope="scope">
          <span>{{ scope.row.introduce.length > 10 ? scope.row.introduce.substring(0, 10) + '...' : scope.row.introduce }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="body" label="正文">
        <template slot-scope="scope">
          <span>{{ scope.row.body.length > 10 ? scope.row.body.substring(0, 10) + '...' : scope.row.body }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="photo"  label="图片">
        <template v-slot="scope">
          <el-image :src="scope.row.photo" :preview-src-list="scope.row.photo"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="推荐人数"></el-table-column>
      <el-table-column prop="addr" label="地址"></el-table-column>
      <el-table-column prop="createtime" label="创建时间"></el-table-column>


      <el-table-column label="操作">
        <template v-slot="scope">
          <!--scope就是当前行的数据-->     <!--点击跳转到这个路由，带上ID-->
          <el-button type="primary"  @click="$router.push('/EditTravel?id='+scope.row.id)">编辑</el-button>
          <el-popconfirm
              style="margin-left: 5px"
              title="确认删除这行数据吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button  type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;margin-left: 300px">
      <el-pagination
          background
          :page-size="params.pageSize"
          :current-page="params.pageNum"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">

      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/util/request";
export default {
  name: "TravelBackground",
  data(){
    return{
      tableData:[],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 5,
        name:""
      }
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      request.get("/travel/pageback",{params:this.params}).then(res=>{
        if (res.code=="200"){
          this.tableData=res.data.list
          this.total=res.data.total
          console.log(this.tableData)
        }
      })
    },
    handleCurrentChange(pageNum){
      //点击分页按钮触发
      this.params.pageNum=pageNum;
      this.load();
    },
    reset(){
      this.params={
        pageNum:1,
        pageSize:5,
        name:"",
      }
      //再次调用查询所有
      this.load();
    },
    del(id){
      request.delete("/travel/back/"+id).then(res=>{
        if (res.code=="200"){
          this.load()
          this.$notify.success("删除成功")

        }else{
          this.$notify.error(res.data)
        }
      })
    }
  }

}
</script>

<style scoped>

</style>